<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style rel="stylesheet">
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            background-color: black;
            box-shadow: 0 0 6px black;
        }

        body {
            background-color: #222;
        }
    </style>

</head>
<body>
<canvas id=c></canvas>
</body>
</html>
<script>
    var w = c.width = window.innerWidth,
            h = c.height = window.innerHeight,
            ctx = c.getContext('2d'),

            cen = {
                x: w / 2,
                y: h / 2
            },
            radiant = 0,
            particles = [],
            particleCount = 1,
            frame = 0,
            middleCover = ctx.createRadialGradient(cen.x, cen.y, 0, cen.x, cen.y, 20);

    middleCover.addColorStop(0, 'rgba(0, 0, 0, .1)');
    middleCover.addColorStop(1, 'rgba(0, 0, 0, 0)');

    function anim() {
        window.requestAnimationFrame(anim);

        update();
    }
    anim();

    function Particle() {
        this.x = cen.x;
        this.y = cen.y;
        this.vx = Math.cos(radiant);
        this.vy = Math.sin(radiant);

        this.color = 'hsl(rad, 80%, 50%)'
                .replace('rad', ((radiant / Math.PI) * 180) | 0);
    }
    Particle.prototype.update = function () {
        this.x += this.vx;
        this.y += this.vy;

        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, 2, 2);
    }

    function update() {

        ctx.fillStyle = 'rgba(0, 0, 0, .04)';
        ctx.fillRect(0, 0, w, h);

        radiant += .1;
        radiant %= Math.PI * 2;

        ++frame;
        if (frame > particleCount) {
            frame = 0;
            particles.push(new Particle);
        }

        for (var i = 0; i < particles.length; ++i) {
            var par = particles[i];
            par.update();

            if (par.x > w || par.x < 0 || par.y > h || par.y < 0) {
                particles.splice(i, 1);
                --i;
            }
        }

        ctx.fillStyle = middleCover;
        ctx.beginPath();
        ctx.arc(cen.x, cen.y, 20, 0, Math.PI * 2);
        ctx.fill();
    }

    document.addEventListener('click', function () {
        for (var i = 0; i < 10; ++i) update();
    })


    for (var i = 0; i < 100; ++i) update();
</script>